<template>
	<view>
		<view class="newProblem" @click="showAi">
			<image src="@/static/image/ai.jpeg"></image>
		</view>

		<uni-popup ref="popup" type="top" background-color="#fff" :animation="false" :is-mask-click="false">
			<div class="content">
				<div class="close" @click="hideAi">停止聊天</div>
				<view class="title">
					叮豆助手
				</view>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {},
		methods: {
			showAi() {
				this.$refs.popup.open()
			},
			hideAi() {
				this.$refs.popup.close()
			}
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
	}

	.newProblem {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #ffffff;
		border-radius: 50%;
		border: 1px solid #FFF;
		position: fixed;
		right: 30rpx;
		bottom: 30rpx;

		image {
			width: 55rpx;
			height: 55rpx;
		}
	}

	.content {
		height: 100vh;
		width: 100vw;
		position: relative;

		.close {
			position: absolute;
			right: 10rpx;
			top: 6rpx;
			font-size: 24rpx;
		}
	}
</style>